<%-- internal/maintain/order/index.jsp --%>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<%@page import="java.util.*" %>
<%@page import="problemDomain.EmployeeAccountBean"%>
<%@page import="problemDomain.EmployeeAccountBean.Position"%>

<%
	// get the currently logged on employee from session
	EmployeeAccountBean employee = (EmployeeAccountBean)session.getAttribute("employee");
	EmployeeAccountBean.Position pos = null;
	if (employee != null)
		pos = employee.getPosition();
	else {
		response.sendRedirect("../../login/");
		return;
	}
	if (pos == Position.DRIVER) {
		response.sendRedirect("../../login/");
		return;
	}
%>



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<link type="text/css" rel="stylesheet" href="../../css/general.css" />
		<link type="text/css" rel="stylesheet" href="../../css/framed.css" />
		<link type="text/css" rel="stylesheet" href="../../css/order/form.css" />
		<script type="text/javascript" src="../../js/ajax-handler.js"></script>
		<script type="text/javascript" src="../../js/form.js"></script>
		<script type="text/javascript" src="../../js/dialog.js"></script>
		<script type="text/javascript" src="../../js/order/maintain.js"></script>
		<script type="text/javascript" src="../../js/order/form.js"></script>
		<title>ORDRS - Maintain Order</title>
	</head>
		
	<body onload="loadPage()">
			<!-- Title -->
		<div class="pageTitle">
			<img src="../../images/logo.bmp" />
			<!-- Logout -->
			<div class="navi">
				<table class="navi" align="right">
					<tr>
					<%
					
					// Display the links according to the employee's position
					if (pos != null){
						if (pos == EmployeeAccountBean.Position.MANAGER ||
							pos == EmployeeAccountBean.Position.HOST) {
							out.println("<td class=\"navi\"><a href=\"../delivery/\">Delivery</a></td>");
							out.println("<td class=\"navi\"><a href=\"../reservation/index.jsp\">Reservation</a></td>");
							
							if (pos == EmployeeAccountBean.Position.MANAGER) {
								out.println("<td class=\"navi\"><a href=\"../employee/index.jsp \">Employee</a></td>");
								out.println("<td class=\"navi\"><a href=\"../food-item/index.jsp\">Food Item</a></td>");
								out.println("<td class=\"navi\"><a href=\"../menu/index.jsp\">Menu</a></td>");
								out.println("<td class=\"navi\"><a href=\"../menu-item/index.jsp\">Menu Item</a></td>");
								out.println("<td class=\"navi\"><a href=\"../../view/report/index.jsp\">Report</a></td>");
							}
						}
							
					}
					
					%>
						
						<td class="navi"><a href="../../login/">Logout</a></td>
					</tr>
				</table>
			</div>
			<!-- END Logout -->
		</div>
		<!-- END Title -->			
			
		<!-- Panel -->
		<div class="panel">
		<fieldset>
		<legend>Maintain Order</legend>
			<table style="border: 0px; width: 100%;">
				<tr style="height: 0">
					<td rowspan="3">
						<!-- Fields -->
						<div  class="fields">
							<!-- hidden inputs -->
							
							<input id="orderID" type="hidden" value="" />
							<input id="orderItemID" type="hidden" value="" />
							<input id="menuItemID" type="hidden" value="" />
							
							<!-- END hidden inputs -->
							<table align="center">
								<tr>
									<td><h4>Patron Info</h4></td>
								</tr>
								<tr>
									<td class="fieldLabel">* First Name:</td>
									<td><input id="firstname" type="text" maxlength="30"/></td>
									<td id="firstnameMessage"></td>
								</tr>
								<tr>
									<td class="fieldLabel">Last Name:</td>
									<td><input id="lastname" type="text" maxlength="30"/></td>
									<td id="lastnameMessage"></td>
								</tr>
								<tr>
									<td class="fieldLabel">* Phone:</td>
									<td><input id="phone" type="text" maxlength="10"/></td>
									<td id="phoneMessage"></td>
								</tr>
								<tr>
									<td><h4>Order Info</h4></td>
								</tr>
								<tr>
									<td class="fieldLabel">Created by: </td>
									<td id="createdBy"></td>
								</tr>
								<tr>
									<td class="fieldLabel">Date Placed:</td>
									<td id="datePlaced"></td>
								</tr>
								<tr>
									<td class="fieldLabel">* Order Status:</td>
									<td>
										<select id="orderStatus">
											<option value="" selected="selected"></option>
											<optgroup id="orderStatusOptGroup" label="Order Status">
											</optgroup>
										</select>
									</td>
									<td id="orderStatusMessage"></td>
								</tr>
								<tr>
									<td class="fieldLabel">* Payment Status:</td>
									<td>
										<select id="paymentStatus">
											<option value="" selected="selected"></option>
											<optgroup id="paymentStatusOptGroup" label="Payment Status">
											</optgroup>
										</select>
									</td>
									<td id="paymentStatusMessage"></td>
								</tr>
								<tr>
									<td class="fieldLabel">Order Type: </td>
									<td>
										<select id="orderType">
											<option value="Pickup" selected="selected">Pickup</option>
											<option value="Delivery">Delivery</option>
										</select>
									</td>
								</tr>
								<tr>
									<td></td>
									<td id="delivery"></td>
								</tr>
							</table>
							
						</div>
						
						<!-- END Fields -->
					</td>
					
				</tr>	
				<tr>
				<td rowspan="2" class="vrule" ></td>	
					<td class="resultsHead">Order List
						<table>
							
							<tr>
								<form name="showOpForm">
									<td><input type="radio" name="showOption" value="0" onclick="listAllOrder()" selected/>All Orders</td>	
									<td><input type="radio" name="showOption" value="1" onclick="listAllOrder()"/>Incomplete Orders</td>	
								</form>
								
							</tr>
						</table>
					</td>
					<td>
						<!-- List All Button -->
						<ul class="toolbar">
							<li onclick="listAllOrder(), listMenuItem()">List All</li>
						</ul> 
						
					</td>
				</tr>
				<tr>
					<td class="resultsTD" colspan="2">
						<!-- Results -->
						
						<div id="results" class="resultsPanel">
						</div>
						
						<!-- END Results -->
					
					</td>
				</tr>
				<tr valign="top">
					<td class="menuTD">
						<!-- Order Item List -->
						
						<h4>Items in this order</h4>
								
						<div id="orderItemList" class="orderItemListPanel"></div>
						
						<!-- END Order Item List -->
					</td>
					<td>
						
						<!-- Add/Remove Buttons -->
						<div class="addRemovePanel">
							<table align="center">
								<tr><td><br><br></td>
								</tr>
								<tr>
									<td class="buttonTD"><input type="button" onclick="addItem()" value="&lt"/></td>
								</tr>
								<tr><td><br><br></td>
								</tr>
								<tr>
									<td class="buttonTD"><input type="button" onclick="removeItem()" value="&gt"/></td>
								</tr>
								<tr><td><br><br></td>
								</tr>
								<tr>
									<td class="buttonTD"><input type="button" onclick="decreaseItemQty()" value="-"/></td>
								</tr>
							</table>
						
						</div>
						<!-- END Add/Remove Buttons -->
						
					</td>
					<td colspan="2" class="menuTD">
					
						<!-- Menu Item Panel -->
						
						<h4>Menu</h4>
						
						<div id="menuItemList" class="menuItemListPanel"></div>
						
						<!-- END Menu Item Panel -->
					
					</td>
				</tr>
				
				<tr>
					<td style="vertical-align: top; padding-top: 10px;" align="center">
						<!-- Toolbar -->
						<ul class="toolbar">
							<!--li onclick="createOrder(false)">Create</li-->
							<li onclick="reportOrder()">Search</li>
							<li onclick="updateOrder()">Update</li>
							<li onclick="deleteOrder()">Delete</li>
							<li onclick="resetFields()">Clear</li>
						</ul>
						<!-- END Toolbar -->
					
					</td>
					<td>
					</td>
					<td><h5>Search an Item</h5>
						<table align="center">
							<tr>
								<td class="fieldLabel">Item No.:</td>
								<td><input type="text" id="itemNumber" maxlength="4" /></td>
								<td id="itemNumberMessage"></td>
							</tr>
							<tr>
								<td class="fieldLabel">Name:</td>
								<td><input type="text" id="itemName" maxlength="25" /></td>
							</tr>
						</table>
					</td>
					<td>
						<ul class="toolbar">
							<li onclick="searchMenuItem()">Search</li>
						</ul>
					</td>
				</tr>
			</table>
		</fieldset>
		</div>
		<!-- END Panel -->
	</body>
</html>
